<ng-content></ng-content>
<ng-template
  #overlay="cdkConnectedOverlay"
  cdkConnectedOverlay
  apesConnectedOverlay
  [cdkConnectedOverlayOrigin]="origin"
  [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
  (backdropClick)="hide()"
  (detach)="hide()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayPositions]="_positions"
  [cdkConnectedOverlayOpen]="_visible">
  <div class="apes-popover"
       [ngClass]="_classMap"
       [ngStyle]="apesOverlayStyle"
       [@.disabled]="noAnimation?.apesNoAnimation"
       [apesNoAnimation]="noAnimation?.apesNoAnimation"
       [@zoomBigMotion]="'active'">
    <div class="apes-popover-content">
      <div class="apes-popover-arrow"></div>
      <div class="apes-popover-inner">
        <div>
          <div class="apes-popover-inner-content">
            <div class="apes-popover-message">
              <ng-container *apesStringTemplateOutlet="title">
                <ng-container *apesStringTemplateOutlet="apesIcon">
                  <i apes-icon [apesType]="apesIcon || 'exclamation-circle'" apesTheme="fill"></i>
                </ng-container>
                <div class="apes-popover-message-title">{{ title }}</div>
              </ng-container>
            </div>
            <div class="apes-popover-buttons">
              <button apes-button [apesSize]="'small'" (click)="onCancel()">
                <ng-container *ngIf="apesCancelText">{{ apesCancelText }}</ng-container>
                <ng-container *ngIf="!apesCancelText">{{ 'Modal.cancelText' | apesI18n }}</ng-container>
              </button>
              <button apes-button [apesSize]="'small'" [apesType]="apesOkType" (click)="onConfirm()">
                <ng-container *ngIf="apesOkText">{{ apesOkText }}</ng-container>
                <ng-container *ngIf="!apesOkText">{{ 'Modal.okText' | apesI18n }}</ng-container>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>
